<template>

<div class="login">

    <!-- 用于显示名字 -->
    <div class="header">
        <p class="title">Welcome to CUHK NoteWave</p>
    </div>

    <!-- 内容 -->
    <div class="content">
        <!-- 放图片 -->
        <div class="content-left">
            <img src="../assets/image/loginbg.png" class="img-bg">
        </div>
        <!-- 放表单 -->
        <div class="content-right">
            <!-- 登录 -->
            <div class="content-right-title">login</div>
            <form action="">
                <div class="user-name" style="margin-top: 20px;">
                    <el-icon><Avatar /></el-icon>
                    <el-input placeholder="username" name="username" type="text" v-model="form.username" />
                </div>
                <div class="user-pass" style="margin-top: 20px;">
                  <el-icon><Lock /></el-icon>
                  <el-input placeholder="password" name="password" type="password" v-model="form.password" @keyup.enter="onSubmit"/>
                </div>
            </form>
            <!-- 注册，忘记密码 -->

            <div class="register">
                <div class="tip">{{tips.msg}}</div>
                <a class="register-a" href="/#/regeister">register</a>
            </div>
            <!-- 登录按钮 -->
            <div class="register-button">
                <!-- <input type="button" @click="doSubmit" value="Login" class="btn btn-primary register-button-btn"> -->
                <el-button type="primary" @click="onSubmit" style="width:100%">Login</el-button>
            </div>
        </div>
    </div>

    <!-- 底部信息 -->
    <div class="footer">

    </div>
</div>
</template>
<script setup>
import { reactive,inject } from 'vue'
import { login } from '../api/user'
import { useStaffStore } from '../stores/staff'
import { useRouter,useRoute} from 'vue-router';
import { setStaff, setToken, setUsername} from '../utils/auth'

const currentRoute = useRouter()

const form = reactive({
  username: '',
  password: ''
})

const tips = reactive({
  msg: ''
})
const staffStore = useStaffStore()
const isLoggedIn = inject('isLoggedIn')
function onSubmit() {
  const regdata = {"username":form.username,"password":form.password};
  login(regdata).then((res) => {
    if (res.code == 200)
    {
        isLoggedIn.value = true;
        localStorage.setItem('isLoggedIn', 'true');
        //设置token
        setToken(res.data.token);
        setStaff(res.data.personname);
        setUsername(res.data.username);
        staffStore.setToken(res.data.token);
        staffStore.setStaff(res.data.personname);
        staffStore.setUsername(res.data.username);
        currentRoute.push('/home')
    }
  })
}

</script>
<style lang="less" scoped>

/* 强制设置图标颜色（深色模式下） */
.el-icon {
  color: #333 !important; /* 深色 */
}

/* 或者根据深色模式动态调整 */
@media (prefers-color-scheme: dark) {
  .el-icon {
    color: #999 !important; /* 浅灰色 */
  }
}

/* 页面配置 */
.login {
    height: 100%;
}
.header {
    width: 100%;
    height: 160px;
    display: flex;
    justify-content:center;
}
.title {
    font-size: 33px;
    color: rgba(0, 0, 0, .85);
    font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-weight: 600;
    position: relative;
    top: 75px;
}

.content {
    margin: 0 auto;
    width: 1000px;
    height: 420px;
    background: #f0f2f5;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.img-bg {
    height: 480;
    width: 533px;
}
.content-left {
    height: 100%;
    display: flex;
    align-items:center;
}
.content-right {
    width: 400px;
    height: 100%;
    margin-top:50px;
    padding: 30px;
}
.content-right-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 10px;
   color: rgba(0, 0, 0, .85);
}
/* 登录 */
.register {
    margin-top: 0px;
    line-height: 60px;
    // display: flex;
    // flex-direction: row-reverse;
}
.register-a {
    margin-right: 0px;
    float:right;
    text-align: right;
    width: 50%;
}
.register-button {
    line-height: 1.499;
    font-weight: 400;
    width: 100%;
    margin-top: 20px;
}
.register-button-btn {
    width: 100%;
    border-radius: 7px;
}
.tip {
    margin: 0;
    // padding: 20px;
    float:left;
    height: 30px;
    width: 50%;
    color: red;
}
</style>
